<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>jQuery拖拽插件Magnet.js</title>
    <link rel="stylesheet" href="css/table.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-magnet.min.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
    <script type="text/javascript" src="js/device2.js"></script>
    <script src="js/jquery-plugin.js"></script>
    <script src="js/newmap.js"></script>
    <style>
        body {
            margin: 0;
        }

        #lines, #paper {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        #paper {
            display: flex;
            flex-flow: column;
        }


        #container {
            flex: 2 2;
        }



        input, button {
            outline: none;
            border: .1vmin solid #666;
            font-family: monospace;
            color: #333;
        }

        input[type=checkbox] {
            width: 20px;
            height: 20px;
        }

        button {
            background-color: #eee;
        }

        button:active {
            transform: translate(.1vmin, .1vmin);
        }

        #lines {
            z-index: 1;
            pointer-events: none;
        }

        #lines > * {
            position: absolute;
            width: 1px;
            height: 1px;
            background-color: #999;
            opacity: 0;
        }

        #lines > .show {
            opacity: .5;
        }

        #lines .vert {
            transform: translateX(-50%);
            height: 100%;
        }

        #lines .hori {
            transform: translateY(-50%);
            width: 100%;
        }

        .block {
            position: absolute;
            overflow: auto;
        }

        .block input {
            position: absolute;
            top: 0;
            right: 0;
        }

        .pop {
            width: 200px;
            padding: 10px;
            font-size: 14px;
            color: #999999;
            border: 1px #ecedee solid;
            position: absolute;
            border-radius: 5px;
            background-color: #ffffff;
        }

        .row {
            margin: 4px 0;
            font-size: 12px;
        }

        .row > span {
            margin: 4px 0;
            font-size: 12px;
        }

        /*.pop-tips {*/
        /*    transform-origin: 10% 100%;*/
        /*}*/

        /*.pop-tips:after {*/
        /*    bottom: -7px;*/
        /*    left: 16px;*/
        /*    position: absolute;*/
        /*    width: 12px;*/
        /*    height: 12px;*/
        /*    content: " ";*/
        /*    transform: rotate(45deg);*/
        /*    border: 1px solid #ecedee;*/
        /*    border-top: 0;*/
        /*    border-left: 0;*/
        /*    background-color: #fff;*/
        /*}*/
        .slider {
            position: fixed;
            top: 0;
            right: -350px;
            width: 381px;
            height: 100%;
            z-index: 1000;
            transition: all 0.5s ease-in-out;
            display: flex;
            flex-direction: row;
        }

        .tag {
            width: 30px;
            height: 150px;
            margin-top: 120px;
            border-radius: 5px 0 0 5px;
            background-color: #eeeeee;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .icon {
            width: 24px;
            height: 24px;
        }

        .text {
            color: #1a252f;
            font-size: 18px;
            text-align: center;
        }

        .content {
            width: 351px;
            height: 100%;
            overflow: auto;
            background-color: #eeeeee;
            box-shadow: 0px 0px 10px #999;
        }

        .open {
            right: 0;
        }

        .trigger span {
            display: block;
            left: 0;
            width: 100%;
            height: 3px;
            background: #FFFFFF;
            position: absolute;
            opacity: 1;
            transform: rotate(0, 0);
            transition: all 0.1s ease-in-out;
        }

        .trigger span:nth-child(1) {
            top: 0px;
        }

        .trigger span:nth-child(2) {
            top: 6px;
        }

        .trigger span:nth-child(3) {
            top: 12px;
        }

        .trigger-open span:nth-child(1) {
            transform: rotate(45deg);
            top: 6px;
        }

        .trigger-open span:nth-child(2) {
            width: 0;
        }

        .trigger-open span:nth-child(3) {
            transform: rotate(-45deg);
            top: 6px;
        }

        /*    弹窗 tab  begin*/
        .tab {
            height: 36px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            list-style-type: none;
        }


        .products {
            width: 100%;
            height: calc(100% - 100px);
        }

        .products .main {
            float: left;
            display: none;
            height: 100%;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
        }

        /*    弹窗 tab  end*/

        .deviceFrom {
            width: 84%;
            padding: 20px;
        }

        .deviceFrom input {
            width: 20%;
            height: 30px;
            border: 1px solid #999;
            border-radius: 4px;
        }

        .createBtn {
            display: inline-block;
            border: none;
            outline: none;
            height: 30px;
            border-radius: 5px;
            background: #73d66e;
            border: 1px solid #96d293;
            line-height: 1;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
        }

        .deviceBox {
            width: 96%;
            height: 90%;
            box-sizing: border-box;
            margin-left: 2%;
            padding: 10px;
            border-radius: 10px;
            background-color: #ffffff;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .middleBox #all {
            position: relative;
            width: 80%;
            height: 600px;
            cursor: move;
            border: 1px solid #000;
            background-color: #FFF;
            top: 0;
            left: 0;
            transform-origin: 0 0;
        }
        .middleBox .control{
            position: fixed;
            top: 20px;
            left: 30px;
            width: 250px;
            height: 60px;
            background-color: rgba(0,0,0,.1);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            z-index: 10;
        }
        .middleBox .control .btn{
            width: 40px;
            height: 40px;
            background-color: rgba(0,0,0,.4);
            color: #ffffff;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }



    </style>
</head>
<body>
<div class="middleBox" >
    <div class="control">
        <div class="btn" onclick="amplify(1)">+</div>
        <div class="btn" onclick="amplify(2)">-</div>
        <button onclick="getTableData()">获取表格数据</button>
    </div>
    <div id="all">
        <div id="lines">
            <span class="vert"></span>
            <span class="hori"></span>
        </div>
        <div id="paper">

            <div id="container"></div>
            <div class="pop pop-tips" style="display: none">
                <div class="row">
                    本地ip: <span class="ip"></span>
                </div>
                <div class="row">
                    cpu利用率: <span class="cpu"></span>
                </div>
                <div class="row">
                    内存总量: <span class="memory"></span>
                </div>
                <div class="row">
                    当前使用量: <span class="memory_use"></span>
                </div>
                <div class="row">
                    硬盘总大小: <span class="disk"></span>
                </div>
                <div class="row">
                    当前使用量: <span class="disk_use"></span>
                </div>
                <div class="row">
                    接受的总字节数: <span class="accept"></span>
                </div>
                <div class="row">
                    发送的总字节数: <span class="send"></span>
                </div>
                <div class="row">
                    当前用户: <span class="user"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="slider">
        <div class="tag">
            <img class="icon" src="img/left.png"/>
            <div class="text">打开弹窗</div>
        </div>
        <div class="content">
            <ul class="tab">
                <li class="tab-item active">分组</li>
                <li class="tab-item">设备</li>
            </ul>
            <div class="products">
                <div class="main selected">
                    分组栏目
                </div>
                <div class="main">
                    <div class="deviceFrom">
                        <span class="tip">行：</span>
                        <input type="number" id="row" style="width: 20%;">
                        <span class="tip">列：</span>
                        <input type="number" id="column" style="width: 20%;">
                        <button class="createBtn">创建</button>
                    </div>
                    <div class="deviceBox">
                        <div class="item">
                            001
                        </div>
                        <div class="item">
                            002
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<script>
    //拖拽功能实现
    //获取相关CSS属性
    var getCss = function (o, key) {
        return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
    };
    //拖拽的实现
    var startDrag = function (bar, target, callback) {
        $(document).mouseover(function(e){
                var isCanDrag = e.target.id=='container'
                if (getCss(target, "left") !== "auto") {
                    params.left = getCss(target, "left");
                }
                if (getCss(target, "top") !== "auto") {
                    params.top = getCss(target, "top");
                }
                //o是移动对象
                bar.onmousedown = function (event) {
                    if(!isCanDrag) return
                    params.flag = true;
                    if (!event) {
                        event = window.event;
                        //防止IE文字选中
                        bar.onselectstart = function () {
                            return false;
                        }
                    }
                    var e = event;
                    params.currentX = e.clientX;
                    params.currentY = e.clientY;
                };
                document.onmouseup = function () {
                    if(!isCanDrag) return
                    params.flag = false;
                    if (getCss(target, "left") !== "auto") {
                        params.left = getCss(target, "left");
                    }
                    if (getCss(target, "top") !== "auto") {
                        params.top = getCss(target, "top");
                    }
                };
                document.onmousemove = function (event) {
                    if(!isCanDrag) return
                    var e = event ? event : window.event;

                    if (params.flag) {
                        var nowX = e.clientX, nowY = e.clientY;
                        var disX = nowX - params.currentX, disY = nowY - params.currentY;
                        target.style.left = parseInt(params.left) + disX + "px";
                        target.style.top = parseInt(params.top) + disY + "px";

                        if (typeof callback == "function") {
                            callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                        }

                        if (event.preventDefault) {
                            event.preventDefault();
                        }
                        return false;
                    }


                }

        })

    };

    startDrag(document.getElementById("all"), document.getElementById("all"))


    $("#img").hover(function () {
        jQuery(document.body).css({
            "overflow-x": "hidden",
            "overflow-y": "hidden"
        });
    }, function () {
        jQuery(document.body).css({
            "overflow-x": "auto",
            "overflow-y": "auto"
        });
    });


</script>
<script>
    //侧面抽屉分栏
    $(".content .tab-item").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(".products .main").eq($(this).index()).show().siblings().hide();
    })
    var isOpenRightBox = false
    var isClickClose = false
    $(".content").hover(function () {
        setTimeout(() => {
            if (!isOpenRightBox) {
                isOpenRightBox = true
                isClickClose = false
                $(".slider").toggleClass("open");
                $(".icon").attr("src", "img/right.png");
                $(".text").html("关闭弹窗");
            }
        }, 300)

    })
    $(".tag").click(function () {
        if (!isOpenRightBox) {
            isOpenRightBox = true
            $(".slider").toggleClass("open");
            $(".icon").attr("src", "img/right.png");
            $(".text").html("关闭弹窗");
        } else {
            isOpenRightBox = false
            isClickClose = true
            $(".slider").removeClass("open");
            $(".icon").attr("src", "img/left.png");
            $(".text").html("打开弹窗");
            setTimeout(() => {
                isClickClose = false
            }, 600)
        }

    });
</script>
<script>
    (($) => {
        var myTiming;//鼠标悬浮出弹窗 页面定时器
        const itemBox = {
            width: 150,
            height: 100
        };//定义设备模块大小
        const $window = $(window);
        const $magnet = $.magnet({
            distance: 10,//吸附距离初始值
            stayInParent: false,//固定画布初始值
            alignOuter: true,//外部对其初始值
            alignInner: false,//内部对齐初始值
            alignParentCenter: false,//盒子父级居中对齐
            alignCenter: false,//父级居中对齐
        });

        $window.on('load', () => {
            const $container = $('#container');
            const $mask = $('#lines');
            const $horiMagnet = $mask.find('.hori');
            const $vertMagnet = $mask.find('.vert');

            $magnet
                .on('start change end', ({type}) => {
                    console.log(`magnet${type}`);
                })
                .on('end', () => {
                    $horiMagnet.removeClass('show');
                    $vertMagnet.removeClass('show');
                })
                .on('change', (e) => {
                    // show/hide horizon/vertical edge line
                    let result = e.detail;
                    let resultX = result.x;
                    let resultY = result.y;
                    if (resultX) {
                        $vertMagnet.css('left', (resultX.position + 'px'));
                        $vertMagnet.addClass('show');
                    } else {
                        $vertMagnet.removeClass('show');
                    }
                    if (resultY) {
                        $horiMagnet.css('top', (resultY.position + 'px'));
                        $horiMagnet.addClass('show');
                    } else {
                        $horiMagnet.removeClass('show');
                    }
                });


            //初始化设备
            (function addEle() {
                console.log('数据=', deviceJson)
                for (let i = 0; i < deviceJson.length; i++) {
                    addBox(deviceJson[i])
                }
                addFun()
            })()

            //创建box
            function addBox(option) {
                console.log('看看拖动又没触发？')
                const {row, column, childList, name, left, top} = option;
                const rootWidth = $window.width();
                const rootHeight = $window.height();

                const width = itemBox.width * column + column * 10; //盒子宽
                const height = itemBox.height * row + row * 10 + 20; //盒子高
                //创建 checkbox
                var inset = ''
                const $checkbox = $('<input>')
                    .attr('type', 'checkbox')
                    .prop('checked', false)
                    .on('mousedown touchstart', (evt) =>  evt.stopPropagation())
                    .on('change', function (e) {
                        if (this.checked) {
                            console.log('兄弟选择器',$(this).next()[0].dataset)
                            let data = $(this).next()[0].dataset
                            inset = inset!='' ? inset : `${data.top}px auto auto ${data.left}px`

                            let block = this.parentElement;
                            $(this).next().css({"pointer-events": "none"});
                            $magnet.add(block);
                            $(block)[0].style.width = width+'px'
                            $(block)[0].style.height = Number(height + 10)+'px'
                            $(block)[0].style.inset = inset
                        } else {
                            console.log('兄弟选择器',this.parentNode.style.inset)
                            inset = this.parentNode.style.inset
                            let block = this.parentNode;
                            block.style.resize = 'none';//设定用户可调整元素的高度和宽度。
                            $magnet.remove(block);
                            // $(block)[0].style.width = width+'px'
                            // $(block)[0].style.height = Number(height + 10)+'px'
                            $(block)[0].style.inset = `${inset.top}px auto auto ${inset.left}px`
                            $(this).next().css({"pointer-events": "auto"});
                        }
                    });
                const $block = $('<span>')
                    .css({
                        width: width + 'px',
                        height: Number(height + 10) + `px`,
                        left: left + `px`,
                        top: top + `px`,
                        backgroundColor: `rgba(0, 0, 0, .1)`,
                    })
                    .addClass('block')
                    .on('mousedown', function (e) {
                        console.log('鼠标按下',this.style)
                        this.style.width=width+'px'
                        this.style.height=Number(height + 10)+'px'
                        this.style.zIndex = 10;
                    })
                    .on('click', function () {
                        console.log('block点击')
                        $(this).parent().append(this);
                        this.style.zIndex = 1;
                        this.style.width=width+'px'
                        this.style.height=Number(height + 10)+'px'
                    })
                    .on('attract unattract attracted unattracted', function (e) {
                        console.log(e.type, e);
                        this.style.width=width+'px'
                        this.style.height=height+'px'
                    })
                    .append($checkbox)
                    .appendTo($container);

                let parentLength = $("div[class='parent']").length;//当前页面 有几个 parent
                var $parent = $('<div class="parent" data-action="' + name + '"data-top="' + top + '"data-left="' + left + '" data-row="' + row + '" data-column="' + column + '" style="width: ' + Number(column * itemBox.width + column * 10) + 'px;margin-top: 30px;"></div>')
                let A_Z = 'ABCDEFGHIJKLMNOPKRSTUVWXYZ'
                let a_z = 'abcdefghijklmnopkrstuvwxyz'
                for (let i = 0; i < childList.length; i++) {
                    console.log('输出status=', childList[i].objData ? childList[i]['objData']['status'] : '没有objData')
                    let seachImg = childList[i].objData ? childList[i]['objData']['status'] == 1 ? 'img/computer-no.png' : 'img/computer-off.png' : 'img/computer-off.png'
                    let onAndOff = childList[i].objData ? childList[i]['objData']['status'] == 1 ? 'on' : 'off' : 'off'
                    let isRun = childList[i].objData ? childList[i]['objData']['status'] == 1 ? '运行中' : '已关机' : '已关机'
                    let id = childList[i].objData ? childList[i].objData.id : ''
                    let objname = childList[i].objData ? childList[i].objData.name : ''
                    let item1 = `<div class="list_name" data-id="` + id + `">` + objname + `</div>` +
                        `<img src="` + seachImg + `" alt="" class="comp_img">` +
                        ` <div class="status ` + onAndOff + `"><div class="circle"></div>` + isRun + `</div>`
                    let haveDom = childList[i].objData ? item1 : ''
                    let str = `<div class="item" data-parent="` + name + `" data-position="` + childList[i].position + `">` + haveDom + `</div>`
                    console.log('str=', str)
                    let $item = $(str)
                    $parent.append($item)
                }
                $block.append($parent)
                return $block;
            }

            var Astop = true;
            var Parent = '', toParent = '';

            //添加 设备 拖拽事件
            function addFun() {

                $('#container .item').on('mousedown', function (e) {
                        if (Astop) {
                            if (e.offsetX <= 10 || e.offsetY <= 10) return //防止误操作 故改为距离边框 4 才可进行拖拽操作
                            Parent = $(this)[0].dataset.parent //当前要替换的dom 的 父ID
                            Astop = false;
                            let that = this;
                            let disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
                            let disy = e.offsetY;
                            let disx2 = e.clientX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
                            let disy2 = e.clientY;
                            /*获取当前拖拽的dom的页面位置 begin*/
                            let thatGrandPosition = $(that).parent().parent().position()
                            let thatPosition = $(that).position()
                            let animatePosition = {
                                top: thatGrandPosition.top + thatPosition.top,
                                left: thatGrandPosition.left + thatPosition.left,
                            }
                            /*获取当前拖拽的dom的页面位置 end*/
                            let $clone = $(this).clone(); //克隆
                            $clone.addClass('draging').css({ //对克隆的盒子设置类名以及位置
                                left: e.clientX - e.offsetX,
                                top: e.clientY - e.offsetY,
                            });
                            $('#container').append($clone); //追加到box里面
                            $(this).addClass('moving').html(''); //被克隆的元素添加类移除内容
                            $('#container').on('mousemove', function (e) { //对克隆的盒子进行拖拽
                                $clone.css({
                                    left: e.pageX - $(this).offset().left - disx,
                                    top: e.pageY - $(this).offset().top - disy + 20
                                })
                                clearTimeout(myTiming);//清除显示定时器
                            });

                            $clone.on('mouseup', function () {
                                    $('#container').off('mousemove'); //取消mousemove事件
                                    let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
                                    let minObj;

                                    $('#container .item').not(':last').each(function () { //不包括克隆的那个盒子
                                        let grandPosition = $(this).parent().parent().position()
                                        let thisPosition = $(this).position()
                                        let smalldistance = Math.sqrt(Math.pow($clone.position().left - thisPosition.left - grandPosition.left, 2) + Math.pow($clone.position().top - thisPosition.top - grandPosition.top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
                                        if (smalldistance < minValue) { //比较
                                            minValue = smalldistance; //获取最小值
                                            minObj = {
                                                dom: $(this),
                                                position: {
                                                    left: thisPosition.left + grandPosition.left,
                                                    top: thisPosition.top + grandPosition.top,
                                                }
                                            } //距离最短的dom + 定位
                                        }
                                    });
                                    let minData = minObj.dom[0].dataset;//获取距离最短的dom标识
                                    let nowData = $(that)[0].dataset;//获取要拖拽的标识

                                    if ((minData.parent == nowData.parent) && (minData.position == nowData.position)) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。
                                        $clone.animate($(that).position(), 400, function () {
                                            $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
                                            $(this).remove(); //移除被克隆的盒子
                                            Astop = true;
                                        });
                                    } else {
                                        toParent = minData.parent;//要跳到的div 标识，判断是否是相同div内拖拽
                                        let $minbox = minObj.dom; //最小索引的盒子
                                        let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
                                        $clone2.addClass('draging').css({
                                            left: minObj.position.left,
                                            top: minObj.position.top
                                        })
                                        $('#container').append($clone2); //追加
                                        $minbox.addClass('moving').html('');
                                        $clone.animate(minObj.position, 400, function () { //克隆的内容运动到最小索引的盒子的位置
                                            $minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
                                            $clone.remove(); //移除克隆的盒子
                                            Astop = true;
                                        });
                                        $clone2.animate(animatePosition, 400, function () {
                                                $(that).removeClass('moving').html($clone2.html());
                                                $clone2.remove();
                                                Astop = true;
                                            }
                                        );
                                    }
                                }
                            )
                            ;
                        }
                        return false;
                    }
                )
                ;
            }

            //添加 设备 拖拽事件
            function addFun2() {
                let Astop = true;
                let Parent = '', toParent = '';
                $('#all .item').on('mousedown', function (e) {
                        if (Astop) {
                            if (e.offsetX <= 10 || e.offsetY <= 10) return //防止误操作 故改为距离边框 4 才可进行拖拽操作
                            Parent = $(this)[0].dataset.parent //当前要替换的dom 的 父ID
                            Astop = false;
                            let that = this;
                            let disx = e.offsetX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
                            let disy = e.offsetY;
                            let disx2 = e.clientX; //获取的拖拽过程的短线的长度（鼠标的位置离盒子边缘的位置）
                            let disy2 = e.clientY;
                            /*获取当前拖拽的dom的页面位置 begin*/
                            let thatGrandPosition = $(that).parent().parent().position()
                            let thatPosition = $(that).position()
                            let animatePosition = {
                                top: thatGrandPosition.top + thatPosition.top,
                                left: thatGrandPosition.left + thatPosition.left,
                            }
                            /*获取当前拖拽的dom的页面位置 end*/
                            let $clone = $(this).clone(); //克隆
                            $clone.addClass('draging').css({ //对克隆的盒子设置类名以及位置
                                left: e.clientX - e.offsetX,
                                top: e.clientY - e.offsetY,
                            });
                            $('#all').append($clone); //追加到box里面
                            $(this).addClass('moving').html(''); //被克隆的元素添加类移除内容
                            $('#all').on('mousemove', function (e) { //对克隆的盒子进行拖拽
                                $clone.css({
                                    left: e.pageX - $(this).offset().left - disx,
                                    top: e.pageY - $(this).offset().top - disy + 20
                                })
                                clearTimeout(myTiming);//清除显示定时器
                            });

                            $clone.on('mouseup', function () {
                                    $('#all').off('mousemove'); //取消mousemove事件
                                    let minValue = 1000; //初始化最小值，用来存储所有盒子的最小值
                                    let minObj;

                                    $('#all .item').not(':last').each(function () { //不包括克隆的那个盒子
                                        let grandPosition = $(this).parent().parent().position()
                                        let thisPosition = $(this).position()
                                        let smalldistance = Math.sqrt(Math.pow($clone.position().left - thisPosition.left - grandPosition.left, 2) + Math.pow($clone.position().top - thisPosition.top - grandPosition.top, 2)); //利用勾股定理获取每一个盒子离克隆出来的盒子的距离
                                        if (smalldistance < minValue) { //比较
                                            minValue = smalldistance; //获取最小值
                                            minObj = {
                                                dom: $(this),
                                                position: {
                                                    left: thisPosition.left + grandPosition.left,
                                                    top: thisPosition.top + grandPosition.top,
                                                }
                                            } //距离最短的dom + 定位
                                        }
                                    });
                                    let minData = minObj.dom[0].dataset;//获取距离最短的dom标识
                                    let nowData = $(that)[0].dataset;//获取要拖拽的标识

                                    if ((minData.parent == nowData.parent) && (minData.position == nowData.position)) { //如果当前最小距离的那个盒子和拖拽的盒子索引相等的话，归位。
                                        $clone.animate($(that).position(), 400, function () {
                                            $(that).removeClass('moving').html($clone.html()); //恢复被克隆盒子的相关样式
                                            $(this).remove(); //移除被克隆的盒子
                                            Astop = true;
                                        });
                                    } else {
                                        toParent = minData.parent;//要跳到的div 标识，判断是否是相同div内拖拽
                                        let $minbox = minObj.dom; //最小索引的盒子
                                        let $clone2 = $minbox.clone(); //克隆一个最小盒子的副本，添加相关样式
                                        $clone2.addClass('draging').css({
                                            left: minObj.position.left,
                                            top: minObj.position.top
                                        })
                                        $('#all').append($clone2); //追加
                                        $minbox.addClass('moving').html('');
                                        $clone.animate(minObj.position, 400, function () { //克隆的内容运动到最小索引的盒子的位置
                                            $minbox.removeClass('moving').html($clone.html()); //移除相关样式，添加内容
                                            $clone.remove(); //移除克隆的盒子
                                            Astop = true;
                                        });
                                        $clone2.animate(animatePosition, 400, function () {
                                                $(that).removeClass('moving').html($clone2.html());
                                                $clone2.remove();
                                                Astop = true;
                                            }
                                        );
                                    }
                                }
                            )
                            ;
                        }
                        return false;
                    }
                )
                ;
            }

            addFun2()
            getTableData = function () {
                let nowDeviceJson = []
                //1.获取页面 class='parant',判断有几个分组
                let $parent = $('#container .parent')

                //2.获取页面 class='item'
                let $item = $('#container .item')

                for (let i = 0; i < $parent.length; i++) {
                    let obj = {
                        name: $($parent[i]).data('action'),
                        row: $($parent[i]).data('row'),
                        column: $($parent[i]).data('column'),
                        left: $($parent[i]).parent().position().left,
                        top: $($parent[i]).parent().position().top,
                        zIndex: 1,
                        childList: []
                    }
                    for (let j = 0; j < $item.length; j++) {
                        //根据 data-parent 分别赋值给不同的组
                        if ($($item[j]).data('parent') == obj.name) {
                            let children = $($item[j])[0].children
                            obj.childList.push({
                                position: $($item[j]).data('position'),
                                obj: children.length > 0 ? {
                                    id: children[0].dataset.id,
                                    name: $($($item[j])[0].children[0]).text(),
                                    status: $($($item[j])[0].children[2]).text() == '运行中' ? 1 : 0
                                } : {}
                            })
                        }
                    }
                    nowDeviceJson.push(obj)
                }
                console.log('页面现有表格数据', nowDeviceJson)
            }

            //页面弹窗数据绑定
            var popData = {
                ip: '',
                memory: '',
                memory_use: '',
                disk: '',
                disk_use: '',
                accept: '',
                send: '',
                user: '',
            }
            Object.defineProperty(popData, 'ip', {
                set: function (val) {
                    console.log('接收到参数', val)
                    $('.ip').text(val)
                },
            })
            Object.defineProperty(popData, 'memory', {
                set: function (val) {
                    console.log('接收到参数', val)
                    $('.memory').text(val)
                },
            })
            Object.defineProperty(popData, 'memory_use', {
                set: function (val) {
                    console.log('接收到参数', val)
                    $('.memory_use').text(val)
                },
            })
            Object.defineProperty(popData, 'disk', {
                set: function (val) {
                    console.log('接收到参数', val)
                    $('.disk').text(val)
                },
            })
            Object.defineProperty(popData, 'disk_use', {
                set: function (val) {
                    console.log('接收到参数', val)
                    $('.disk_use').text(val)
                },
            })
            Object.defineProperty(popData, 'accept', {
                set: function (val) {
                    console.log('接收到参数', val)
                    $('.accept').text(val)
                },
            })
            Object.defineProperty(popData, 'send', {
                set: function (val) {
                    console.log('接收到参数', val)
                    $('.send').text(val)
                },
            })
            Object.defineProperty(popData, 'user', {
                set: function (val) {
                    console.log('接收到参数', val)
                    $('.user').text(val)
                },
            })

            //鼠标悬浮2秒触发弹窗显示
            $(".item").mouseover(function (e) {
                let left = $(this).offset().left;
                let top = $(this).offset().top;
                $(this).addClass('hoverItem')
                if ($(this)[0].children.length > 0) {
                    myTiming = setTimeout(function () {
                        popData.ip = '123'
                        popData.user = 'mcccc',
                            $('.pop').css({
                                display: 'block',
                                left: left + itemBox.width + 10 + 'px',
                                top: top + 'px',
                                zIndex: 99
                            })
                    }, 1000);
                }
            });
            $(".item").mouseout(function () {
                $(this).removeClass('hoverItem')
                clearTimeout(myTiming);
                $('.pop').css('display', 'none')
            });
        });
    })(jQuery);
</script>
</body>
</html>